<template>
  <div class="online_customer">
    <!-- banner -->
    <div class="re banner" v-if="bannerSwiperData.show && banner.length>0">
      <swiper :options="bannerSwiperConfig">
        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index"><img src="../../assets/images/banner.png" alt=""></swiper-slide>
      </swiper>
    </div>
    <div class="white">
      <div class="box">
          <div class="breadcrumb-nav">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>在线客服</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="tips-box">
            <img src="../../assets/images/jqr.png" alt="">
            <div class="tips-content">
              请在搜索框里提出您的问题，小T会尽我所能给您去找答案哦！
            </div>
          </div>

          <h2>提交您的需求</h2>

          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="您的姓名" class="width_half">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" class="width_half">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="搜索问题">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="详情描述">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认提交</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import swiperBtn from '@/components/swiperBtn.vue' //轮播的翻页 + 左右按钮
import {swiperConfig, ajax,ajaxAdd } from '@/utils/js.js'
import {serviceItems, homeBanner,homeNews, photoStyle} from '@/services/api.js'
const log = console.log
export default {
  components:{
    swiperBtn
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      banner:[],
      bannerSwiperConfig:'',//banner-轮播配置,
      bannerSwiperData:{show:false}, //banner-轮播参数
    }
  },
  mounted(){
    let data = {
        view:4,
        prev:'prev1',
        next:'next1',
        show:true,
    }
    swiperConfig(this,data,'serveSwiperConfig','serveSwiperData')
    let bannerData = {
      view:1,
      show:true,
      autoplayLast:true,
      fy:'bannerdot'
    }
    swiperConfig(this,bannerData,'bannerSwiperConfig','bannerSwiperData')
    let newsData = {
      view:1,
      show:true,
      autoplayLast:true,
      delay:5000
    }
    swiperConfig(this,newsData,'newsSwiperConfig','newsSwiperData',index=>{
      log(index)
      this.newsCurId = this.newsList[index].id
    })
    this.content()
  },
  computed:{
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
  methods:{
    content(){
      // 主题轮播
      ajax(this,homeBanner,{},res=>{
        this.banner = res.data
      })
    },
    //首页跳转
    indexLink(data){
     if(data.outLink && data.outLink==1){
        window.open(data.linkUrl,'-blank')
      }else{
        window.location.href = data.linkUrl
      }
    },
    
  }
}
</script>
<style lang="scss">
.online_customer{
  .banner{
    img{display: block;}
    .el-carousel--button{
      width:12px;
      height:12px;
      background:rgba(255,255,255,1);
      border-radius:50%;
      opacity: 1;
    }
    .el-carousel--indicator.is-active button{
      background-color: #0F54BC;
    }
  }
  .noRecord{
    text-align: center;
    padding: 144px 0;
    border-top:1px solid rgba(204,204,204,1);
    p:first-child{
     text-align: center;
    }
     p:nth-child(2){
      margin-top: 25px;
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(153,153,153,1);
      opacity:1;
    }
    p:last-child{
      margin-top: 36px;
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(119,119,119,1);
      opacity:1;
      a{
        margin-left: 14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(15,84,188,1);
        opacity:1;
        text-decoration:underline;
      }
    }
  }
  .white{
    background: #fff;
  }
  .box{
    box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 70px;
    .breadcrumb-nav{
      font-size:13px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(153,153,153,1);
      opacity:1;
      margin: 8px 0;
    }
    .tips-box{
      margin: 62px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      .tips-content{
        margin-left: 17px;
        padding: 11px 12px;
        box-sizing: border-box;
        width:246px;
        height:59px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 6px rgba(0,0,0,0.08);
        opacity:1;
        font-size:13px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:20px;
        color:rgba(102,102,102,1);
        opacity:1;
      }
    }
    h2{
      margin: 39px 0;
      font-size:28px;
      font-family:Microsoft YaHei;
      font-weight:bold;
      color:rgba(51,51,51,1);
      opacity:1;
      text-align: center;
    }
    .width_half{
      width: 50%;
      float: left;
    }
    .width_half::after{
      height: 0px;
      width: 100%;
      clear: both;
      content: "";
    }
    label{
      font-size:14px;
      font-family:MicrosoftYaHei;
      color:rgba(51,51,51,1);
      opacity:1;
    }
    input{
      height:40px;
      border:1px solid rgba(229,229,229,1);
      opacity:1;
      border-radius:2px;
    }
    textarea{
      height: 111px;
      resize: none;
    }
    button{
      width:148px;
      height:50px;
      background:rgba(15,84,188,1);
      opacity:1;
      border-radius:2px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      color:rgba(255,255,255,1);
      opacity:1;
    }
  }
}
</style>